scss

#scss| 来源: 网络整理| 查看: 265

@mixin定义 @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }

父选择器

@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }

混合多个

@mixin compound { @include highlighted-background; @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; } @include 引入 page-title { @include large-text; padding: 4px; margin-top: 10px; }

参数混合引入（可设置默认值）

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

不确定参数个数，在参数后加 ...

@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } /*编译后*/ .shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }

定义数组数值，传入数组作为多个参数，传入参数加...

@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); } 标题@content在@mixin中插入内容

将需要插入内容的位置用@content代替

@mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } /*编译后*/ * html #logo { background-image: url(/logo.gif); }

为便于书写，@mixin 可以用 = 表示，而 @include 可以用+表示

=apply-to-ie6-only * html @content +apply-to-ie6-only #logo background-image: url(/logo.gif)

插入时的变量命名空间，使用时，插入的内容不能拿到mix内部的变量，而是同级以上的才可以取到

$color: white; @mixin colors($color: blue) { background-color: $color; @content; border-color: $color; } .colors { @include colors { color: $color; } /*此处的$color 是取的全局的white*/ } /*编译后*/ .colors { background-color: blue; color: white; border-color: blue; } @function

函数声明用@function ，一个函数可以含有多条语句，需要调用 @return 输出结果。

$grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); }

【本文地址】

scss

scss

今日新闻

推荐新闻